<template>
  <div class="register pb70">
    <div class="container input-contain bg-c-fff">
      <h2 class="box-title">用户注册</h2>
      <form @submit.prevent="onBindClick">
        <ul class="input-box">
          <li class="magin-bom rel"><span>用户名</span>
            <input type="text" placeholder="请输入用户名" class="input-css input-w1" v-model='userName'>
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="magin-bom rel">
            <span>手机号码</span>
            <input type="number" placeholder="请输入账户管理员手机号码" class="input-css input-w1" v-model.number='phone'>
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="magin-bom rel">
            <span>验证码</span>
            <input type="text" placeholder="请输入数字验证码" class="input-css input-w2" v-model="numberCode">
            <img :src="numberCodeUrl" class="number-code-img" @click="onNumberCodeImgClick">
            <i class="iconfont icon-asterisk number-code-required"></i>
          </li>
          <li class="magin-bom yzm-box rel">
            <span>验证码</span>
            <input type="text" placeholder="请输入验证码" class="input-css input-w2" v-model="verificationCode">
            <i class="iconfont icon-asterisk"></i>
            <input type="button" :value="countdown | codeText" class="button-css blue-button yzm-btn vb" @click="onGetPhoneCode" :class="{'blue-button-disabled': countdown>0}">
          </li>
          <li class="rel"><span>密码</span>
            <input type="password" placeholder="请输入密码" class="input-css input-w1" v-model='passWord'>
            <i class="iconfont icon-asterisk"></i>
            <p>6-24个字符，由英文字母（区分大小写）、数字或下划线组成</p>
          </li>
          <li class="rel"><span>确认密码</span>
            <input type="password" placeholder="请再次输入密码" class="input-css input-w1" v-model='passWords'>
            <i class="iconfont icon-asterisk"></i>
            <p class="agreement">
              <input type="checkbox" class="vm" id="checkbox" v-model="checked">我已阅读并同意<a href="#/agreement" target="_blank">《信宝网服务协议》</a>
            </p>
          </li>
          <li>
            <input type="submit" value="立即注册" class="blue-button cup input-w3">
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  components: {},
  data() {
    return {
      userName: '',
      passWord: '',
      passWords: '',
      phone: '',
      checked: '',
      verificationCode: '',
      numberCode: '',
      numberCodeUrl: '/member/verification/code',
      countdown: -1,
      countdownTimer: 0
    }
  },
  methods: {
    onNumberCodeImgClick() {
      this.numberCodeUrl = '/member/verification/code?r=' + Math.random()
    },
    onGetPhoneCode() {
      if (this.countdown > 0) {
        this.$toasted.show('请稍后再重新获取验证码')
        return
      }
      if (!this.numberCode) {
        this.$toasted.show('请输入数字验证码')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      this.$http.post('/member/register/code', {
        phone: this.phone,
        verifyCode: this.numberCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('验证码已发送，请注意查收')
          this.countdown = 60
          this.countdownTimer = setInterval(() => {
            this.countdown--
              if (this.countdown <= 0) {
                this.countdown = 0
                clearInterval(this.countdownTimer)
              }
          }, 1000)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onBindClick() {
      if (!this.userName) {
        this.$toasted.show('用户名不能为空')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.passWord) {
        this.$toasted.show('密码不能为空')
        return
      }
      if (this.passWord.length > 24) {
        this.$toasted.show('密码不要超过24个字')
        return
      }
      if (this.passWord.length < 6) {
        this.$toasted.show('密码不能少于6个字')
        return
      }
      if (this.passWord !== this.passWords) {
        this.$toasted.show('两次输入的密码不同')
        return
      }
      if (!this.checked) {
        this.$toasted.show('请同意协议')
        return
      }
      let params = {
        account: this.userName,
        password: this.passWord,
        phone: this.phone,
        verifyCode: this.verificationCode,
        memberType: 1
      }
      this.$http.post('/member/register', params).then(data => {
        if (data.data.httpCode === 200) {
          // this.$store.dispatch('getUserInfo').then(data => {
          //   if (data.data.httpCode === 200) {

          //   } else {
          //     this.$toasted.show(data.data.msg)
          //   }
          // }, err => {
          //   console.log(err)
          // })
          this.$toasted.show('注册成功，请登录！')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    }
  },
  filters: {
    codeText(v) {
      if (v === -1) {
        return '获取验证码'
      } else if (v === 0) {
        return '重新获取'
      } else {
        return '重新获取(' + v + ')'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
input::-webkit-input-placeholder {
  color: #a5a5a5;
}

.icon-asterisk {
  position: absolute;
  right: 3px;
  color: #ec5303;
  font-size: 25px;
  top: 5px;
}

.yzm-btn,
ul li:last-child input {
  height: 40px;
  line-height: 40px;
}

.yzm-box .icon-asterisk {
  right: 104px;
}

.number-code-required {
  right: 105px;
}

</style>
